<template>
  <cu-layout :bgStyle="{ color: actBgColor }" :navProp="{ placeholder: true, isOpacity: false }">
    <view :class="[`${prefixCls}-student-certification-container`]">
      <view class="activity-body">
        <!-- 活动介绍 -->
        <view class="activity-body-card" v-if="actId">
          <view class="card-top">租房大礼包</view>
          <view class="card-content">
            <view class="card-content-item" v-for="(v, i) in actDetail.equity_detail" :key="i">
              <view class="card-icon"> <uv-image width="84rpx" height="84rpx" :src="v.icon" shape="circle" mode="aspectFit" /> </view>
              <view class="card-con">
                <view class="main">
                  <text class="sign" v-if="v.name">{{ v.name }}</text>
                  <view class="title uv-line-1">{{ v.content }}</view>
                </view>
              </view>
            </view>
            <view class="subBtn" @click="toDetail"> </view>
          </view>
        </view>
      </view>
      <!-- 活动规则 -->
      <view class="rule-tips" :style="{ top: `${$Platform.device.safeAreaInsets.top + 44 + 20}px` }" @click="openRulePopup">活动规则</view>
      <ActivityRule ref="activityRulePopup" :ruleInfo="actRule" />
    </view>
  </cu-layout>
</template>
<script>
import { mapGetters } from 'vuex'
import ActivityRule from './components/activity-rule.vue'
import share from '@/mixins/share'
import { getLandingPage, getBringActivityScene } from './api'
export default {
  name: 'studentCertificationIndex',
  components: { ActivityRule },
  mixins: [share],
  props: {},
  data() {
    return {
      actId: '', // 活动id
      actDetail: {},
      actRule: {
        title: '活动规则',
        content: '',
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['isLogin', 'userInfo']),
    actBgImage() {
      return `url(${this.actDetail?.main_image || CDN('/customer/static/images/student/student_bg@2x.png')})  no-repeat top center / 100% auto`
    },
    btnImage() {
      return `url(${this.actDetail?.button_image || CDN('/customer/static/images/student/student_submit_btn@2x.png.png')}) no-repeat top center / 100% auto`
    },
    actBgColor() {
      return this.actDetail?.bg_color || '#0DA199'
    },
    onSharePageConfig() {
      if (!this.actDetail.share_text) {
        return {}
      }
      return this.$Platform.share.getShareInfo({
        title: this.actDetail.share_text,
        image: this.actDetail.share_image || CDN('/common/static/images/share/poster_646x948.png'),
        params: {
          page: `/pages/subpackage/student-certification/index`,
          query: `actId=${this.actId}`,
        },
      })
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  async onLoad(options) {
    console.log('🚀 ~ onLoad student-certification~ options:', options)
    if (options.spm) {
      const { actId = '' } = this.$Platform.share.decryptSpm(options.spm)
      this.actId = actId
    } else if (options.scene) {
      const { actId = '' } = await this.getActQuery(options.scene)
      this.actId = actId
    } else this.actId = options.actId || ''
    await this.getPageData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    async getPageData() {
      if (!this.actId) return uni.$uv.toast('缺少活动参数！')
      // 获取活动详情
      this.getActDetail()
    },
    toDetail() {
      if (this.actDetail.jump_type === 1) {
        this.$ROUTE.go('/pages/main/home')
      } else {
        this.$ROUTE.go('/pages/subpackage/student-certification/detail', { id: this.actDetail.id })
      }
    },
    // 获取海报图查询参数
    async getActQuery(scene) {
      const { errcode, data = {} } = await getBringActivityScene({ scene })
      if (errcode === 0) {
        return data?.params || {}
      }
    },
    // 显示规则
    openRulePopup() {
      this.$refs.activityRulePopup.open()
    },
    // 获取活动详情
    async getActDetail() {
      const { errcode, data = {} } = await getLandingPage({ marketing_activity_id: this.actId })
      if (errcode === 0) {
        this.actDetail = data || {}
        this.actDetail.equity_detail = data.equity_detail.map((item, index) => {
          return {
            ...item,
            name: item.name.includes('1次') ? item.name.replace('1次', '') : item.name,
          }
        })
        this.actRule.content = this.actDetail.rule
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('student-certification-container')} {
  position: relative;
  padding: 40rpx 30rpx 40rpx;
  background: v-bind(actBgImage);
  min-height: 100vh;
  .activity-body {
    margin-top: 684rpx;
    .activity-body-card {
      position: relative;
      margin-bottom: 60rpx;
      padding: 60rpx 24rpx 24rpx;
      background: #fff;
      border-radius: 24rpx;
      .card-top {
        position: absolute;
        left: 50%;
        top: 30rpx;
        transform: translate(-50%, -50%);
        background: #{cdn('/customer/static/images/student/student_title.png')} no-repeat center / contain;
        padding: 0 55rpx;
        text-align: center;
        width: 252rpx;
        line-height: 60rpx;
        font-weight: 600;
        font-size: 32rpx;
        color: #fff;
      }
      .card-top::before,
      .card-top::after {
        content: '';
        position: absolute;
        left: 70rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 24rpx;
        height: 24rpx;
        background: #{cdn('/customer/static/images/activity/star@2x.png')} no-repeat center / cover;
        z-index: 1;
      }
      .card-top::after {
        left: auto;
        right: 70rpx;
      }
      .card-content {
        padding-top: 40rpx;
        .card-content-item {
          display: flex;
          align-items: center;
          margin: 16rpx auto;
          padding: 20rpx;
          background: linear-gradient(90deg, #fffbf1 0%, #fff1df 100%);
          border-radius: 8rpx;
          .card-icon {
            width: 84rpx;
            height: 84rpx;
            margin-right: 16rpx;
            line-height: 84rpx;
            text-align: center;
            border-radius: 50%;
            background-color: #fff0e6;
            overflow: hidden;
          }
          .card-con {
            width: calc(100% - 100rpx);
            overflow: hidden;
            .main {
              display: flex;
              align-items: baseline;
              margin-bottom: 8rpx;
              .sign {
                padding-right: 16rpx;
                font-size: 40rpx;
                font-weight: 600;
                color: #ff8400;
              }
              .title {
                font-size: 20rpx;
                color: #643d35;
              }
            }
          }
        }
      }
    }
  }
  .rule-tips {
    width: 132rpx;
    box-sizing: border-box;
    height: 48rpx;
    position: fixed;
    right: 0;
    padding: 0 16rpx;
    background: rgba($color: #000000, $alpha: 0.2);
    border-top-left-radius: 240rpx;
    border-bottom-left-radius: 240rpx;
    line-height: 48rpx;
    font-size: 24rpx;
    color: #fff;
    z-index: 98;
  }
  .subBtn {
    background: v-bind(btnImage);
    width: 388rpx;
    height: 104rpx;
    margin: 48rpx auto;
    position: relative;
  }
}
</style>
